<?php echo $this->headLink()->appendStylesheet($this->baseUrl('css/loginform.css'));?>
<div id="login_wrapper">
	<div id="loginform">
		<form action="<?php echo $this->baseUrl('index/login'); ?>" method="post">
			<span id="close_login"></span>
			<table>
			  <tr>
				<td align="center" colspan="2" width="25%"><img src="<?php  echo $this->baseUrl('images/login-form.jpg');?>" /></td>
			  </tr>
			  <tr>
				<td>User name</td>
				<td width="75%"><input required="required" name="username" type="text" maxlength="100%" style="width:85%" />
				</td>
			  </tr>
			  <tr>
				<td>Password</td>
				<td><input required="required" name='password' type="password" maxlength="100%" style="width:85%"/>
				</td>
			  </tr>
			  <tr>
			  	<td colspan="2"><?php ?></td>
			  </tr>
			  <tr>
				<td>
				<?php 
				if(!empty($this->error))
					echo $this->error;
				?></td>
				<td style="padding-bottom:20px">
					<input name='submit' id="login" type="submit" value="Sign in"/>
				</td>
			  </tr>
			</table>
		</form>
	</div>
</div>

<script type="text/javascript">
	$(document).ready(function(){
		$('#dangnhap').click(function(){
			//$('#login_wrapper').css('display',"block");
			height =	Math.max(
			        $(document).height(),
			        $(window).height(),
			        /* For opera: */
			        document.documentElement.clientHeight
			    );
		    height = height + 'px';
			$('#login_wrapper').css('height',height);
			$('#login_wrapper').fadeIn('slow');
			$('body').css('overflow','hidden');
		});

		$('#login_wrapper').click(function(event){
			var $target = $(event.target);
			$id = $($target).attr('id');
			if($id == 'login_wrapper'){
				$('#login_wrapper').fadeOut('slow');
				$('body').css('overflow','');
			}
		});
		$('#close_login').click(function(){
			$('#login_wrapper').fadeOut('300');
			$('body').css('overflow','');
		});
		
	});
</script>